<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet/less" href="./css/index.less">
		<link rel="stylesheet" type="text/css" href="./css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
		<title>spirit8</title>
	</head>

	<body>
		<!-- 导航 -->
		<div class="header navbar-fixed-top">
			<div class="container">
				<div class="row">
					<nav class="navbar navbar-default" role="navigation">
						<div class="container-fluid">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
									<span class="sr-only">切换导航</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand logo wow fadeInLeft" href="#">Spirit8</a>
							</div>
							<div class="collapse navbar-collapse" id="example-navbar-collapse">
								<ul class="nav navbar-nav navbar-right">
									<li class="active wow fadeInDown"><a href="#heme">HOME</a></li>
									<li class="wow fadeInDown"><a href="#About">About</a></li>
									<li class="wow fadeInDown"><a href="#SERVICES">SERVICES</a></li>
									<li class="wow fadeInDown"><a href="#portfolio">portfolio</a></li>
									<li class="wow fadeInDown"><a href="#">testimonials</a></li>
									<li class="wow fadeInDown"><a href="#">CONTACT</a></li>
								</ul>
							</div>
						</div>
					</nav>
				</div>
			</div>
		</div>

		<!-- 背景图 -->
		<div class="banner">
			<!-- <video autoplay muted loop width="100%">
            <source src="./img/banner.mp4"/>
        </video> -->
			<div class="banner-title wow fadeInDown">
				<span>wELCOME on</span>
				<span>spirit8</span>
			</div>
			<div class="banner-font wow fadeInUp">We are a digital agency with years of experience and with extraordinary people</div>
			<div class="banner-btn">↓</div>
		</div>

		<!-- 内容 -->
		<div class="main" id="heme">
			<div class="container">
				<div class="row">
					<div class="col-lg-6 col-md-6">
						<div class="main-left wow fadeInLeft">
							<img src="img/33-spirit8-digital-agency_03.png">
						</div>
					</div>
					<div class="col-lg-6 col-md-6">
						<div class="main-right">

							<div class="main-title wow fadeInDown">About us</div>

							<div class="main-top wow fadeInDown">
								<span>Some</span>
								<span>words</span>
								<span>about us</span>
							</div>

							<div class="main-font wow fadeInDown">
								<p>We love building and rebuilding brands through our </p>
								<p>specific skills. Using colour, fonts, and illustration, we</p>
								<p>brand companies in a way they will never forget.</p>
							</div>

							<div class="main-list">
								<ul>
									<li class="wow fadeInDown">Mission - We deliver uniqueness and quality</li>
									<li class="wow fadeInDown">Skills - Delivering fast and excellent results</li>
									<li class="wow fadeInDown">Clients - Satisfied clients thanks to our experience</li>
								</ul>
							</div>

							<div class="main-btn">
								<span class="glyphicon glyphicon-lock"></span>
								<span>Browse our work</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="menu" id="About">
			<div class="menu-title wow fadeInDown">
				<p>Meet our team</p>
			</div>

			<div class="wow fadeInDown">
				<img src="img/img.png" class="center-block">
			</div>

			<div class="container">
				<div class="row">
					<div class="swiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box wow fadeInDown" data-wow-delay="0ms">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>

								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box wow fadeInDown" data-wow-delay="100ms">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font ">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box wow fadeInDown" data-wow-delay="200ms">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box wow fadeInDown" data-wow-delay="300ms">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>

							</div>
							<div class="swiper-slide">
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>

								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>

								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>

								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
									<div class="menu-box">
										<div class="menu-img">
											<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block">
										</div>
										<div class="menu-font">
											<p>Jason Statham</p>
											<p>Knife designer</p>
										</div>
										<div class="menu-list">
											<ul>
												<li>Do not seek to change what has come </li>
												<li>before. Seek to create that which has </li>
												<li>not.</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>
					</div>
				</div>
			</div>
		</div>


		<div class="submenu" id="SERVICES">
			<div class="submenu-title wow fadeInDown">
				<p>take a look at our services</p>
			</div>

			<div class="wow fadeInUp">
				<img src="img/33-spirit8-digital-agency_013.png" class="center-block">
			</div>

			<div class="submenu-font wow wow fadeInDown">
				<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
					Evil) by Cicero, written in 45 BC. This book is a tre</p>
				<p>atise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
					dolor sit amet..", comes from a line in section 1.10.32.</p>
			</div>

			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<div class="submenu-box wow fadeInLeft">
							<div>
								<img src="img/1.gif" class="center-block">
							</div>
							<div class="submenu-center">
								<p>Web design</p>
							</div>
							<div class="submenu-bottom">
								<p>he first line of Lorem Ipsum, "Lorem </p>
								<p>ipsum dolor sit amet..", comes from a</p>
								<p>line in section 1.10.32.</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<div class="submenu-box  wow fadeInLeft">
							<div>
								<img src="img/2.gif" class="center-block">
							</div>
							<div class="submenu-center">
								<p>Web design</p>
							</div>
							<div class="submenu-bottom">
								<p>he first line of Lorem Ipsum, "Lorem </p>
								<p>ipsum dolor sit amet..", comes from a</p>
								<p>line in section 1.10.32.</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<div class="submenu-box wow fadeInRight">
							<div>
								<img src="img/3.gif" class="center-block">
							</div>
							<div class="submenu-center">
								<p>Web design</p>
							</div>
							<div class="submenu-bottom">
								<p>he first line of Lorem Ipsum, "Lorem </p>
								<p>ipsum dolor sit amet..", comes from a</p>
								<p>line in section 1.10.32.</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<div class="submenu-box wow fadeInRight">
							<div>
								<img src="img/4.png" class="center-block">
							</div>
							<div class="submenu-center">
								<p>Web design</p>
							</div>
							<div class="submenu-bottom">
								<p>he first line of Lorem Ipsum, "Lorem </p>
								<p>ipsum dolor sit amet..", comes from a</p>
								<p>line in section 1.10.32.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="wrapper" id="portfolio">
			<div class="wrapper-title wow fadeInDown">
				<p>SOME OF OUR CLIENTS</p>
			</div>

			<div class="wow fadeInDown">
				<img src="./img/img.png" class="center-block">
			</div>

			<div class="wrapper-img wow fadeInDown">
				<img src="./img/faasfasf.png" class="center-block">
			</div>

			<div class="paging">
				<ul>
					<li class="wow fadeInDown" data-wow-delay="100ms"></li>
					<li class="wow fadeInDown" data-wow-delay="200ms"></li>
					<li class="wow fadeInDown" data-wow-delay="300ms"></li>
				</ul>
			</div>
		</div>

		<div class="container-box">
			<div class="container-title wow fadeInDown">
				<p>take a look at our work</p>
			</div>

			<div class="wow fadeInDown">
				<img src="img/33-spirit8-digital-agency_013.png" class="center-block">
			</div>

			<div class="container-font wow fadeInDown">
				<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
					Evil) by Cicero, written in 45 BC. This book </p>
				<p>is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
					"Lorem ipsum dolor sit amet..", comes from a line in sec</p>
				<p>tion 1.10.32.</p>
			</div>


			<div class="container">
				<div class="row">

					<div class="container-nav">

						<div class="container-left wow fadeInDown">Filter by type</div>

						<div class="container-right wow fadeInDown">
							<ul>
								<li>All</li>
								<li>Web design</li>
								<li>Mobile design</li>
								<li>Photograpy</li>
							</ul>
						</div>
					</div>

					<div class="inner">
						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-3 col-sm-6">
							<div class="inner-box wow fadeInDown">
								<img src="img/inner-img.png" class="inner-img" class="center-block">
								<div class="inner-center">
									<p>Trend and fashion</p>
									<p>Website design</p>
									<div class="inner-btn">+</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>


		<div class="aside">
			<div class="aside-title wow fadeInDown">our clients’ testimonials</div>
			<div class="wow fadeInDown">
				<img src="img/img.png" class="center-block">
			</div>

			<div class="aside-font wow fadeInDown">
				<p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first</p>
				<p>line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
			</div>

			<div class="tag wow fadeInDown">
				Dean Martin, CEO Acme Inc.
			</div>

			<div class="paging1">
				<ul>
					<li class="wow fadeInDown" data-wow-delay="100ms"></li>
					<li class="wow fadeInDown" data-wow-delay="200ms"></li>
					<li class="wow fadeInDown" data-wow-delay="300ms"></li>
				</ul>
			</div>
		</div>

		<div class="search">
			<div class="search-title wow fadeInDown">feel free to contact us</div>
			<div class="wow fadeInDown">
				<img src="img/33-spirit8-digital-agency_013.png" class="center-block">
			</div>

			<div class="search-font wow fadeInDown">
				<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes</p>
				<p>of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular </p>
				<p>during the Renaissance.</p>
			</div>

			<div class="container">
				<div class="row">
					<div class="search-box">
						<div class="search-left wow fadeInDown">
							<div class="col-xs-12">
								<span>Name</span>
								<span style="color: red;">*</span>
							</div>
							<div>
								<input type="text" name="" id="" class="input" value="" />
							</div>
						</div>

						<div class="search-right wow fadeInDown">
							<div class="text-font">
								<span>Email address</span>
								<span style="color: red;">*</span>
							</div>
							<div>
								<input type="email" name="" id="" class="input" value="" />
							</div>
						</div>
					</div>
					
					<div class="text-box wow fadeInDown">
						<div>
							<span class="span">Message</span>
							<span style="color: red;">*</span>
						</div>
						<div class="text wow fadeInDown">
							<textarea rows="10" cols="152"></textarea>
						</div>
					</div>
					<div class="search-btn wow fadeInDown">SEND</div>
				</div>
			</div>
		</div>
		
		
		<div class="footer">
			<div class="container">
				<div class="row">
					<div class="col-lg-6 col-md-6">
						<div class="footer-left wow fadeInDown">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
					</div>
					<div class="col-lg-6 col-md-6">
						<div class="footer-right wow fadeInDown">
							<span><img src="./img/a.gif" ></span>
							<span><img src="./img/b%20(2).gif" ></span>
							<span><img src="./img/c%20(2).gif" ></span>
							<span><img src="img/d.png" ></span>
							<span><img src="./img/e.gif" ></span>
						</div>
					</div>
				</div>
			</div>
		</div>



	</body>
	<script src="./js/wow.min.js"></script>
	<script src="./js/loop.js"></script>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="./js/less.js"></script>
	<script src="js/swiper-bundle.min.js"></script>

	<script>
		var mySwiper = new Swiper('.swiper', {
			direction: 'horizontal', // 垂直切换选项
			loop: true, // 循环模式选项

			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},

			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},

			// 如果需要滚动条
			scrollbar: {
				el: '.swiper-scrollbar',
			},
		})
		// 初始化wow.js
		new WOW().init();

		// 修改视频的播放速度
		document.querySelector('video').defaultPlaybackRate = 8.0;
		document.querySelector('video').play();
		document.querySelector('video').playbackRate = 8.0;
	</script>

</html>
<!-- od and Evil) by Cicero, written in 45 BC. This book </p>
			<p>is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in sec</p>
			<p>tion 1.10.32.</p>
		</div>
		
		
		<div class="container">
			<div class="row">
				
				<div class="container-nav">
					
					<div class="container-left wow fadeInDown">Filter by type</div>
					
					<div class="container-right wow fadeInDown">
						<ul>
							<li>All</li>
							<li>Web design</li>
							<li>Mobile design</li>
							<li>Photograpy</li>
						</ul>
					</div>
				</div>
				
				<div class="inner">
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" >
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
					<div class="col-lg-3 col-md-3 col-sm-6">
						<div class="inner-box wow fadeInDown">
							<img src="img/inner-img.png" class="inner-img" class="center-block">
							<div class="inner-center">
								<p>Trend and fashion</p>
								<p>Website design</p>
								<div class="inner-btn">+</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
	
	
	<div class="aside">
		<div class="aside-title wow fadeInDown">our clients’ testimonials</div>
		<div class="wow fadeInDown">
			<img src="img/img.png" class="center-block">
		</div>
		
		<div class="aside-font wow fadeInDown">
			<p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first</p>
			<p>line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
		</div>
		
		<div class="tag wow fadeInDown">
			Dean Martin, CEO Acme Inc.
		</div>
		
		<div class="paging1">
			<ul>
				<li class="wow fadeInDown" data-wow-delay="100ms"></li>
				<li class="wow fadeInDown" data-wow-delay="200ms"></li>
				<li class="wow fadeInDown" data-wow-delay="300ms"></li>
			</ul>
		</div>
	</div> 
	
	<div class="search">
		<div>feel free to contact us</div>
		<div>
			<img src="img/33-spirit8-digital-agency_013.png" >
		</div>
		
		<div>
			<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes</p>
			<p>of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular </p>
			<p>during the Renaissance.</p>
		</div>
		
		<div class="container">
			<div class="row">
				<div>
				<div class="search-left">
					<div>
						<span>Name</span>
						<span>*</span>
					</div>
					<div>
						<input type="text" name="" id="" value="" />
					</div>
				</div>
				
				<div  class="search-right">
					<div>
						<span>Name</span>
						<span>*</span>
					</div>
					<div>
						<input type="text" name="" id="" value="" />
					</div>
				</div>
				</div>
			</div>
		</div>
	</div>




</body>
<script src="./js/wow.min.js"></script>
<script src="./js/loop.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./js/less.js"></script>
<script src="js/swiper-bundle.min.js"></script>

<script>
    var mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
        // 初始化wow.js
    new WOW().init();

    // 修改视频的播放速度
    document.querySelector('video').defaultPlaybackRate = 8.0;
    document.querySelector('video').play();
    document.querySelector('video').playbackRate = 8.0;
</script>

</html> -->